<template>
    <div class="bodyBox">
        <div class="bodyType">
            <el-radio-group v-model="radio">
                <el-radio :label="1">请求预处理</el-radio>
                <el-radio :label="2">响应预处理</el-radio>
            </el-radio-group>
        </div>
        <beforeReq ref="req" :before="before" :ChangeValue="ChangeValue" v-show="radio == 1"></beforeReq>
        <afterRes ref="res" :after="after" :ChangeValue="ChangeValue" v-show="radio == 2"></afterRes>
    </div>
</template>
<script>
    import quickhandInsert from './quickhandInsert';

    import beforeReq from './beforeReq';
    import afterRes from './afterRes';

    export default {
        props: ['height', 'before', 'after', 'ChangeValue'],
        components: {
            beforeReq,
            afterRes,
        },
        watch: {
            radio(newVal, oldVal) {
                this.$nextTick(() => {
                    this.refreshEditor();
                });
            },
        },
        data() {
            return {
                radio: 1,
            }
        },
        methods: {
            refreshEditor() {
                this.$refs.req.refreshEditor();
                this.$refs.res.refreshEditor();
            },
        },
    }

</script>
<style>
    .body_textarea_layout {
        position: absolute;
        top: 40px;
        bottom: 0px;
        left: 0px;
        right: 0px;
    }
</style>